<template>
    <div class="sidebar">
      <el-tabs :tab-position="tabPosition" style="height: 100%;">
        <el-tab-pane label="我的">
          <!-- 这里可以放置“我的”相关的链接或内容 -->
        </el-tab-pane>
        <el-tab-pane label="我的购物车">
          <!-- 这里可以放置“我的购物车”相关的链接或内容 -->
        </el-tab-pane>
        <el-tab-pane label="收货地址">
          <!-- 这里可以放置“收货地址”相关的链接或内容 -->
        </el-tab-pane>
        <el-tab-pane label="我的订单">
          <!-- 这里可以放置“我的订单”相关的链接或内容 -->
        </el-tab-pane>
        <el-tab-pane label="我的足迹">
          <!-- 这里可以放置“我的足迹”相关的链接或内容 -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'SlideComponent',
    setup() {
      const tabPosition = ref('left');
      return {
        tabPosition
      };
    }
  }
  </script>
  
  <style scoped>
  .sidebar {
    width: 240px; /* 结合前面的建议，增加侧边栏宽度 */
    margin-left: 20px; /* 确保侧边栏有内边距使其不紧贴左侧 */
    background-color: white; /* 设定侧边栏为白色背景 */
  }
  
  .el-tabs__content {
    padding: 10px;
  }
  
  .el-tabs--left .el-tabs__content {
    height: 100%;
  }
  </style>